import React, { useState, useEffect } from 'react'
import { Card } from '&/appComponents/Antd'
import Echarts from '&/baseUI/EChartsUI'
import './index.scss'
const Area = () => {
  const [option1, setOption1] = useState()
  const [option2, setOption2] = useState()

  useEffect(() => {
    const option1 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['响应企业', '未完全响应企业', '未响应企业']
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center'
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: ['海淀区', '西城区', '朝阳区', '石景山区', '丰台区']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '响应企业',
          type: 'bar',
          barGap: 0,
          // label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [320, 332, 301, 334, 390]
        },
        {
          name: '未完全响应企业',
          type: 'bar',
          // label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290]
        },
        {
          name: '未响应企业',
          type: 'bar',
          // label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [150, 232, 201, 154, 190]
        }
      ]
    }
    setOption1(option1)
    const option2 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['响应企业', '未完全响应企业', '未响应企业']
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center'
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: ['2012', '2013', '2014', '2015', '2016']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '响应企业',
          type: 'bar',
          barGap: 0,
          // label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [320, 332, 301, 334, 390]
        },
        {
          name: '未完全响应企业',
          type: 'bar',
          // label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290]
        },
        {
          name: '未响应企业',
          type: 'bar',
          // label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [150, 232, 201, 154, 190]
        }
      ]
    }
    setOption2(option2)
  }, [])

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flex: 1,
        'margin-top': '20px'
      }}
    >
      <Card
        size="small"
        title={
          <span style={{ 'font-weight': 'normal' }}>
            各行业应急响应情况分析
          </span>
        }
        style={{ flex: 1, 'margin-right': '5px' }}
        bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <div className="ProcessAssessment-area">
          <Echarts option={option1} />
        </div>
      </Card>
      <Card
        size="small"
        title={
          <span style={{ 'font-weight': 'normal' }}>
            各区应急响应情况分析&emsp;&emsp;
          </span>
        }
        style={{ flex: 1, 'margin-left': '5px' }}
        bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <div className="ProcessAssessment-area">
          <Echarts option={option1} />
        </div>
      </Card>
    </div>
  )
}
export default Area
